<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		.clearfix:after,
		.clearfix:before {
			content: '';
			display: table;
		}
		
		.clearfix:after {
			clear: both;
		}
		
		.y_content {
			width: 1100px;
			margin: auto;
		}
		
		.y_head {
			width: 100%;
			background-color: #EFEFEF;
		}
		
		.y_header {
			width: 1100px;
			margin: auto;
			padding: 10px 0 10px;
		}
		
		.y_cont_logo {
			width: 200px;
			height: 70px;
			float: left;
			margin-left: 20px;
		}
		
		.y_cont_logo img {
			width: 200px;
			height: 70px;
		}
		
		.y_login_user {
			float: right;
			position: relative;
		}
		
		.y_login_user {
			width: 100px;
		}
		
		.y_login_user img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			padding: 10px;
			display: block;
			margin: auto;
		}
		
		.y_user_detail {
			display: none;
		}
		
		.y_user_detail {
			width: 200px;
			background: #FFF;
			border: solid 1px #CCCCCC;
			position: absolute;
			left: -40px;
			top: 70px;
			z-index: 1;
		}
		
		.y_user_detail p,
		.y_user_detail li {
			font-size: 16px;
			line-height: 46px;
			text-align: center;
		}
		
		.y_user_detail p a,
		.y_user_detail li a {
			text-decoration: none;
			color: #000;
		}
		
		.y_index_search {
			width: 1000px;
			margin: 40px auto 0;
		}
		
		.y_search_top input {
			width: 840px;
			height: 40px;
			outline: none;
			padding-left: 20px;
		}
		
		::-webkit-input-placeholder {
			padding-left: 10px;
			font-size: 18px;
		}
		
		.y_search_top button {
			width: 80px;
			height: 43px;
			color: #FFF;
			background: #008cff;
			border: none;
			outline: none;
			margin-left: 20px;
		}
		
		.y_index_content {
			width: 100%;
			min-height: 500px;
			margin-top: 30px;
		}
		
		.y_index_hot {
			width: 190px;
			border: solid 1px;
			float: left;
			margin-left: 20px;
			border-bottom-right-radius: 30px;
			position: relative;
			overflow: hidden;
			background: #393d48;
			transform-style: preserve-3d;
			perspective: 600px;
			margin-bottom: 30px;
		}
		
		.y_hot_img {
			width: 100%;
			margin: auto;
		}
		
		.y_hot_img img {
			width: 100%;
			height: 250px;
		}
		
		.y_hot_text {
			color: #FFF;
		}
		
		.y_hot_text p:nth-child(1) {
			font-size: 18px;
			line-height: 90px;
			padding-left: 10px;
		}
		
		.y_hot_text p:nth-child(2) {
			font-size: 16px;
			line-height: 40px;
			padding-left: 10px;
		}
		
		.y_index_img_ask {
			width: 100%;
			height: 5px;
			z-index: 1;
			background: #008CFF;
			position: absolute;
			left: 0;
			top: 250px;
		}
		
		.y_login_bottom {
			width: 100%;
			padding-bottom: 80px;
		}
		
		.y_login_bottom p {
			font-size: 16px;
			line-height: 50px;
			text-align: center;
		}
		
		.cont {
			height: 700px;
		}
	</style>

	<body>
		<div class="box">
			<div class="y_head">
				<div class="y_header clearfix">
					<div class="y_cont_logo">
						<img src="images/2.png" />
					</div>
					<div class="y_login_user">
						<img src="images/1.png" />
						<ul class="y_user_detail">
							<p>
								<a href="">立即登录</a>
							</p>
							<li>
								用户名
							</li>
							<li>
								<a href="">我的书架</a>
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								<a href="">个人中心</a>
							</li>
							<li>
								<a href="">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="y_content">

				<div class="y_index_search">
					<div class="y_search_top">
						<input type="text" name="" id="search_inp" value="" placeholder="搜索书名" />
						<button id="search_btn">搜索</button>
					</div>
				</div>
				<div class="y_index_content clearfix">
				</div>
				<div class="y_login_bottom">
					<p>清朗网文　|　关于逐浪　|　作者投稿　|　用户指南　|　服务条款　|　版权声明　|　网站地图　|　招聘信息　|　联系我们</p>
					<p>Copyright © 2019 zhulang.com, All Rights Reserved. 南京大众书网图书文化有限公司版权所有 未经书面许可不得复制转载。</p>
					<p>增值电信业务经营许可证苏B2-20130019 苏ICP备12028084号 苏网文[2016]5224-123号 新出网证（苏）字0027号　</p>
				</div>
			</div>
		</div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		$(".y_login_user").hover(function() {
			$('.y_user_detail').show()
		}, function() {
			$('.y_user_detail').hide()
		});
		$('.y_index_content').on('mouseover', '.y_index_hot', function() {
			$(this).css({
				transform: 'translateY(-8px)',
				transition: 'all 0.3s'
			})
		})
		$('.y_index_content').on('mouseout', '.y_index_hot', function() {
			$(this).css({
				transform: 'translateY(0)',
				transition: 'all 0.3s'
			})
		})
		var href = 'http://localhost:8000'
		//判断有没有登录
		if(!localStorage.user) {
			$('.y_user_detail p').css({
				display: 'block'
			})
			$('.y_user_detail li').css({
				display: 'none'
			})
		} else {
			$('.y_user_detail p').css({
				display: 'none'
			})
			$('.y_user_detail li').css({
				display: 'block'
			})
			$('.y_login_user img').attr('src', localStorage.img)
			$('.y_login_user li').eq(0).html(localStorage.name)
		}
		//退出用户
		$('.y_login_user li').eq(4).on('click', function() {
			$('.y_login_user li').eq(0).html('用户名:')
			$('.y_login_user img').attr('src', 'images/1.png')
			localStorage.clear('user')
			localStorage.clear('uid')
			localStorage.clear('img')
			localStorage.clear('name')
		}) 
		//展示点击率最高的书
		$.ajax({
			type: "post",
			url: href + "/users/hot",
			success(data) {
				console.log(data)
				for(var i = 0; i < data.length-1; i++) {
					var oDiv = $('<div class="y_index_hot">').attr('searchuid', data[i].uid)
					var oA = $('<a>')
					oDiv.append(oA)
					oA.append($('<div class="y_hot_img">').append($('<img>').attr('src', data[i].novelimg))).append($('<div class="y_index_img_ask">')).append($('<div class="y_hot_text">').append($('<p>').html('《' + data[i].novelname + '》')).append($('<p>').html(data[i].author)))
					$('.y_index_content').append(oDiv)
				}
			}
		});
		//搜索小说
		$('#search_btn').on('click', function() {
			if(search_inp.value == '') {
				alert('不能为空')
			} else {
				$('.y_index_content').html('')
				$.ajax({
					type: "post",
					url: href + "/users/sou",
					data: {
						names: $('#search_inp').val()
					},
					success(data) {
						console.log(data)
						if(data == '没有找到这本小说') {
							$('.y_index_content').html(data)
						} else {
							data.forEach(function(o, i) {
								var oDiv = $('<div class="y_index_hot">').attr('searchuid', data[i].uid)
					var oA = $('<a>')
					oDiv.append(oA)
								oA.append($('<div class="y_hot_img">').append($('<img>').attr('src', data[i].novelimg))).append($('<div class="y_index_img_ask">')).append($('<div class="y_hot_text">').append($('<p>').html('《' + data[i].novelname + '》')).append($('<p>').html(data[i].author)))
								$('.y_index_content').append(oDiv)
							})
						}
						$('#search_inp').val('')
					}
				});
			}
		})
		//点击登录
		$('.y_user_detail p').on('click', function() {
			$(this).children().attr('href', href + '/login.html')
		})
		//我的书架
		$('.y_login_user li').eq(1).on('click', function() {
			$(this).children().attr('href', href + '/books.html')
		}) 
		
		var suid=''
		//点击小说跳详情
		$('.y_index_content').on('click','.y_index_hot',function(){
			suid=$(this).attr('searchuid')
			$(this).children('a').attr('href',href+'/fiction.html?uid='+$(this).attr('searchuid'))
			$.ajax({
				type: "post",
				url: href + "/users/history",
				data: {
					loginuid: localStorage.uid,
					suid: suid
				},
				success(data) {
					console.log(data)
				}
			});
		})
		//点击个人中心
		$('.y_login_user li').eq(3).on('click', function() {
			$(this).children().attr('href', href + '/detials.html')
		}) 
		//个人收藏
		$('.y_login_user li').eq(2).on('click', function() {
			$(this).children().attr('href', href + '/collect.html')
		}) 
	</script>

</html>